// 个人信息页面交互脚本

document.addEventListener('DOMContentLoaded', function() {
    // 选项卡切换功能
    const tabBtns = document.querySelectorAll('.tab-btn');
    const authForms = document.querySelectorAll('.auth-form');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const tab = this.getAttribute('data-tab');
            
            // 更新按钮状态
            tabBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            // 更新表单显示
            authForms.forEach(form => {
                form.classList.remove('active');
                if (form.id === tab) {
                    form.classList.add('active');
                }
            });
            
            // 清除所有输入错误
            clearErrors();
        });
    });
    
    // 登录表单提交处理
    const loginForm = document.getElementById('login-form');
    if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('login-username').value.trim();
            const password = document.getElementById('login-password').value;
            
            // 简单验证
            let isValid = true;
            
            if (!username) {
                showError('login-username', '请输入用户名');
                isValid = false;
            }
            
            if (!password) {
                showError('login-password', '请输入密码');
                isValid = false;
            }
            
            if (isValid) {
                // 模拟登录成功
                showSuccessMessage('登录成功！正在跳转到仪表盘...');
                
                // 3秒后跳转到仪表盘
                setTimeout(() => {
                    window.location.href = 'dashboard.html';
                }, 1500);
            }
        });
    }
    
    // 注册表单提交处理
    const registerForm = document.getElementById('register-form');
    if (registerForm) {
        registerForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('register-username').value.trim();
            const email = document.getElementById('register-email').value.trim();
            const password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('register-confirm').value;
            
            // 简单验证
            let isValid = true;
            
            if (!username) {
                showError('register-username', '请输入用户名');
                isValid = false;
            } else if (username.length < 3) {
                showError('register-username', '用户名至少需要3个字符');
                isValid = false;
            }
            
            if (!email) {
                showError('register-email', '请输入邮箱');
                isValid = false;
            } else if (!isValidEmail(email)) {
                showError('register-email', '请输入有效的邮箱地址');
                isValid = false;
            }
            
            if (!password) {
                showError('register-password', '请输入密码');
                isValid = false;
            } else if (password.length < 6) {
                showError('register-password', '密码至少需要6个字符');
                isValid = false;
            }
            
            if (!confirmPassword) {
                showError('register-confirm', '请确认密码');
                isValid = false;
            } else if (password !== confirmPassword) {
                showError('register-confirm', '两次输入的密码不一致');
                isValid = false;
            }
            
            if (isValid) {
                // 模拟注册成功
                showSuccessMessage('注册成功！正在跳转到登录...');
                
                // 2秒后切换到登录选项卡
                setTimeout(() => {
                    document.querySelector('.tab-btn[data-tab="login"]').click();
                    // 清除注册表单
                    registerForm.reset();
                }, 2000);
            }
        });
    }
    
    // 输入框焦点事件处理
    const inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            const errorElement = document.getElementById(`${this.id}-error`);
            if (errorElement) {
                errorElement.remove();
            }
            this.style.borderColor = '#3498db';
        });
        
        input.addEventListener('blur', function() {
            this.style.borderColor = '#ddd';
        });
    });
    
    // 工具函数：显示错误信息
    function showError(inputId, message) {
        // 移除已存在的错误信息
        const existingError = document.getElementById(`${inputId}-error`);
        if (existingError) {
            existingError.remove();
        }
        
        const input = document.getElementById(inputId);
        input.style.borderColor = '#e74c3c';
        
        const errorElement = document.createElement('div');
        errorElement.id = `${inputId}-error`;
        errorElement.className = 'error-message';
        errorElement.textContent = message;
        errorElement.style.color = '#e74c3c';
        errorElement.style.fontSize = '12px';
        errorElement.style.marginTop = '5px';
        
        input.parentNode.appendChild(errorElement);
    }
    
    // 工具函数：清除所有错误
    function clearErrors() {
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(error => error.remove());
        
        inputs.forEach(input => {
            input.style.borderColor = '#ddd';
        });
    }
    
    // 工具函数：邮箱验证
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    // 工具函数：显示成功消息
    function showSuccessMessage(message) {
        // 移除已存在的成功消息
        const existingMessage = document.querySelector('.success-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        const successElement = document.createElement('div');
        successElement.className = 'success-message';
        successElement.textContent = message;
        successElement.style.position = 'fixed';
        successElement.style.top = '20px';
        successElement.style.right = '20px';
        successElement.style.backgroundColor = '#2ecc71';
        successElement.style.color = 'white';
        successElement.style.padding = '15px 25px';
        successElement.style.borderRadius = '5px';
        successElement.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
        successElement.style.zIndex = '1000';
        successElement.style.opacity = '0';
        successElement.style.transform = 'translateY(-20px)';
        successElement.style.transition = 'all 0.3s ease';
        
        document.body.appendChild(successElement);
        
        // 显示动画
        setTimeout(() => {
            successElement.style.opacity = '1';
            successElement.style.transform = 'translateY(0)';
        }, 10);
    }
    
    // 添加导航链接的活动状态管理
    const navLinks = document.querySelectorAll('nav a');
    const currentPath = window.location.pathname;
    
    navLinks.forEach(link => {
        if (link.getAttribute('href') === currentPath.split('/').pop()) {
            link.classList.add('active');
        }
    });
    
    // 为表单添加提交按钮的加载状态
    const submitButtons = document.querySelectorAll('form button[type="submit"]');
    submitButtons.forEach(button => {
        button.addEventListener('click', function() {
            const form = this.closest('form');
            const inputs = form.querySelectorAll('input');
            let hasEmptyInputs = false;
            
            inputs.forEach(input => {
                if (!input.value.trim()) {
                    hasEmptyInputs = true;
                }
            });
            
            if (!hasEmptyInputs) {
                this.textContent = '处理中...';
                this.disabled = true;
                
                setTimeout(() => {
                    this.textContent = this.textContent === '登录' ? '登录' : '注册';
                    this.disabled = false;
                }, 1500);
            }
        });
    });
});